<script setup lang="ts">
import { useHospitalStore } from '@/store/modules/hospitalStore'
import { storeToRefs } from 'pinia'

const hospitalStore = useHospitalStore()
const { hoscodeData } = storeToRefs(hospitalStore)
</script>

<template>
  <div class="hospital_header">
    <!-- 医院名称 -->
    <div class="title">
      <h1>{{ hoscodeData.hospital?.hosname }}</h1>
      <div class="hostype">
        <svg-icon name="dianzan" class="icon"></svg-icon>
        <span>{{ hoscodeData.hospital?.param.hostypeString }}</span>
      </div>
    </div>
    <!-- 医院展现信息 -->
    <div class="content">
      <div class="content_left" v-if="hoscodeData.hospital?.logoData">
        <img :src="'data:image/jpeg;base64,' + hoscodeData.hospital?.logoData" alt="" />
      </div>
      <div class="content_right">
        <svg-icon name="yiyuan2"></svg-icon>
        <div>
          <!-- 具体地址 -->
          <p class="regName">具体地址：{{ hoscodeData.hospital?.param.fullAddress }}</p>
          <!-- 规划路线 -->
          <p class="regName">规划路线：{{ hoscodeData.hospital?.route }}</p>
        </div>
      </div>
    </div>
  </div>
  <!-- 医院介绍 -->
  <div class="introduce" v-if="hoscodeData.hospital?.intro">
    <h3>医院介绍</h3>
    <p class="introduce_p">{{ hoscodeData.hospital?.intro }}</p>
  </div>
  <!-- 空状态 -->
  <el-empty description="暂无其他信息" v-else />
</template>

<style lang="scss" scoped>
.hospital_header {
  .title {
    display: flex;
    height: 50px;
    align-items: center;
    h1 {
      font-size: 25px;
      font-weight: bold;
    }
    .hostype {
      height: 100%;
      margin-left: 10px;
      display: flex;
      align-items: center;
      color: #c6c6c6;
      font-size: 14px;
      .icon {
        flex-shrink: 0;
      }
      span: {
        margin-left: 5px;
      }
    }
  }
  .content {
    display: flex;
    margin-top: 20px;
    .content_left {
      width: 80px;
      flex-shrink: 0;
      img {
        width: 80px;
        height: 80px;
        border-radius: 90px;
      }
    }
    .content_right {
      margin-left: 10px;
      display: flex;
      .regName {
        color: #5f6368;
        font-size: 14px;
        margin-bottom: 10px;
        margin-left: 5px;
      }
    }
  }
}
.introduce {
  margin-top: 20px;
  .introduce_p {
    margin-top: 10px;
    color: #5f6368;
  }
}
</style>
